/* 导入 Font Awesome（通过 npm 安装的版本） */
@import 'font-awesome/css/font-awesome.min.css';
@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义工具类 - 必须放在@import和Tailwind指令之后 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .bg-dark-light{
    --tw-bg-opacity: 1;
    background: rgba(20, 24, 40, 0.12);
    backdrop-filter: blur(1px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 4px 32px #0002;
  }
  .bg-dark {
    --tw-bg-opacity: 1;
    background: rgba(20, 24, 40, 0.12);
    backdrop-filter: blur(1px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 4px 32px #0002;
  }

  .bg-grid {
    position: relative;
    /* 透明度和毛玻璃已在 style 内设置 */
  }

  .bg-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
      linear-gradient(0deg, transparent 24%, #fff2 25%, #fff2 26%, transparent 27%, transparent 74%, #fff2 75%, #fff2 76%, transparent 77%),
      linear-gradient(90deg, transparent 24%, #fff2 25%, #fff2 26%, transparent 27%, transparent 74%, #fff2 75%, #fff2 76%, transparent 77%);
    background-size: 40px 40px;
    border-radius: inherit;
  }

  .card-hover {
    transition: all 0.3s ease;
  }

  .card-hover:hover {
    transform: translateY(-5px);
  }
}